<!-- 中秋活动 -->
<template>
	<view class="content">
		<view class="nav-img">
			<image src="https://image.hzwltb69.com/app/date/2023/中秋_02.jpg" mode="widthFix"></image>
		</view>
		<view class="goods">
			<view class="bigbox">
				<view v-for="item,index in goodsList"
              :key="index"
              @tap="jump('/pages/goods/detail',{ id: item.id })"
              class="box-info">
					<view class="title">
						中秋特惠
					</view>
					<view class="name">
						{{item.name}}
					</view>
					<view class="imgbox">
						<image :src="item.img" mode=""></image>
						<view class="gobox">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
    <view>
      <shHotList
          backgroundColor="#1e3d6b"
          ref="hotlist"
          :page="page"
      ></shHotList>
    </view>
	</view>
 </template>

<script>
import shHotList from './universalWaterFall.vue'
	export default{
    components:{
      shHotList
    },
		data(){
			return{
				goodsList:[],
        page:1
			}
		},
		onShow() {
			this.getGoodsList()
      this.$refs.hotlist.id = 753
      this.$refs.hotlist.hasUserGet()
		},
    onReachBottom() {
      this.page += 1
      this.$refs.hotlist.hasUserGet()
    },
		methods:{
			onBackIndex(){
				uni.navigateBack()
			},
			getGoodsList() {
				let that = this;
				that.$http('goods.getUniversalList', {
					themeFloorId:753,
					current: 1,
					pageSize: 9
				}).then(res => {
					that.goodsList = res.data.list
					uni.setNavigationBarTitle({
						title: res.data.title
					})
				})
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
		},
		}
					
		
</script>

<style lang="scss" scoped>
	.content{
		.nav-img{
			width: 100%;
			margin-bottom: -10rpx;
			// position: relative;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.goods{
			width: 100%;
			height: 1000rpx;
			background: url(https://image.hzwltb69.com/app/date/2023/中秋_03.jpg) no-repeat;
			background-size: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.more{
				width: 100%;
				display: flex;
				justify-content: center;
				.morebox{
					padding: 5rpx 20rpx 5rpx 20rpx;
					border-radius: 30rpx;
					border: 1rpx solid #f2cf95;
					color: #f2cf95;
				}
			}
			.bigbox{
				position: relative;
				z-index: 99999;
				width: 700rpx;
				height: 1000rpx;
				background: url(https://image.hzwltb69.com/app/date/2023/中秋04.png) no-repeat;
				background-size: 100%;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-start;
				align-content: flex-start;
				
				.box-info{
					width: 210rpx;
					height: 280rpx;
					padding-bottom: 20rpx;
					// background: red;
					background: url(https://image.hzwltb69.com/app/date/2023/中秋商品背景.png) no-repeat;
					background-size: 100%;
					// margin-top: 20rpx;
					margin-bottom: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.title{
						color: #144c86;
						font-size: 26rpx;
						font-weight: 600;
					}
					.name{
						width: 150rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 23rpx;
						color: #616161;
					}
					.imgbox{
						margin-top: 5rpx;
						width: 80%;
						height: 160rpx;
						background: #6ab9fe;
						border-radius: 20rpx;
						position: relative;
						image{
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
						.gobox{
							position: absolute;
							bottom: -10rpx;
							left: 50%;
							transform: translate(-50%);
							width: 130rpx;
							height: 40rpx;
							border-radius: 20rpx;
							background: #e60300;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
	.nav-box {
		position: fixed;
		width: 170rpx;
		min-height: 140rpx;
		z-index: 888;
		top: 50rpx;
	
		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
		}
	
		.back-hover {
			background-color: rgba(#fff, 0.18);
		}
	
		.back-share {
			background-color: rgba(#fff, 0.18);
		}
	
		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}
</style>